<template>
  <div class="question-page">
    <el-button type="primary" class="ask-button" @click="showQuestionForm">我要提问</el-button>
    <div v-if="questionFormVisible" class="question-form">
      <el-input v-model="questionForm.title" placeholder="请输入标题"></el-input>
      <el-input v-model="questionForm.detail" type="textarea" placeholder="请输入问题详情"></el-input>
      <el-button type="primary" @click="publishQuestion">发表</el-button>
    </div>
    <div v-for="(question, index) in questions" :key="index" class="question">
      <div class="question-header">
        <div class="user-info">
          <img :src="question.avatar" alt="" class="avatar">
          <span class="question-author">{{ question.username }}</span>
        </div>
        <div class="question-content">
          <div class="question-title">
            <b>{{ question.title }}</b> {{ question.detail }}
          </div>
          <div class="question-footer">
            <div class="question-time">{{ question.time }}</div>
            <el-button type="text" @click="showReplyForm(index)" class="reply-button">回复</el-button>
          </div>
        </div>
      </div>
      <div v-if="question.replyFormVisible" class="reply-form">
        <el-input v-model="question.replyContent" placeholder="请输入回复内容"></el-input>
        <el-button type="primary" @click="publishReply(index)">回复</el-button>
      </div>
      <div v-for="(reply, replyIndex) in question.replies" :key="replyIndex" class="reply">
        <div class="reply-header">
          <div class="user-info">
            <img :src="reply.avatar" alt="" class="avatar">
            <span class="question-author">{{ reply.username }}</span>
          </div>
          <div class="reply-time">{{ reply.time }}</div>
        </div>
        <div class="reply-content">{{ reply.content }}</div>
        <div class="reply-footer">
          <el-button type="text" @click="showReplyForm(index, replyIndex)" class="reply-button">回复</el-button>
        </div>
        <div v-if="reply.replyFormVisible" class="reply-form">
          <el-input v-model="reply.replyContent" placeholder="请输入回复内容"></el-input>
          <el-button type="primary" @click="publishReply(index, replyIndex)">回复</el-button>
        </div>
        <div v-for="(subReply, subReplyIndex) in reply.replies" :key="subReplyIndex" class="sub-reply">
          <div class="sub-reply-header">
            <div class="user-info">
              <img :src="subReply.avatar" alt="" class="avatar">
              <span class="question-author">{{ subReply.username }}</span>
            </div>
            <div class="sub-reply-time">{{ subReply.time }}</div>
          </div>
          <div class="sub-reply-content">{{ subReply.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionFormVisible: false,
      questionForm: {
        title: '',
        detail: ''
      },
      questions: [
        {
          avatar: './img/tx1.jpeg',
          username: 'user1',
          title: '这是问题1的标题',
          detail: '这是问题1的详情1111111111111111111211111',
          time: '2024-03-01 10:00:00',
          replies: [
            {
              avatar: './img/tx2.jpg',
              username: 'user2',
              time: '2024-03-01 11:00:00',
              content: '这是问题1的回复1'
            },
            {
              avatar: './img/tx3.jpeg',
              username: 'user3',
              time: '2024-03-01 12:00:00',
              content: '这是问题1的回复2'
            }
          ],
          replyFormVisible: false,
          replyContent: ''
        },
        {
          avatar: './img/tx4.jpeg',
          username: 'user4',
          title: '这是问题2的标题',
          detail: '这是问题2的详情',
          time: '2024-03-02 10:00:00',
          replies: [
            {
              avatar: './img/tx5.jpeg',
              username: 'user5',
              time: '2024-03-02 11:00:00',
              content: '这是问题2的回复1'
            }
          ],
          replyFormVisible: false,
          replyContent: ''
        },
        {
          avatar: './img/tx6.jpeg',
          username: 'user6',
          title: '这是问题3的标题',
          detail: '这是问题3的详情',
          time: '2024-03-03 10:00:00',
          replies: [],
          replyFormVisible: false,
          replyContent: ''
        }
      ]
    };
  },
  methods: {
    showQuestionForm() {
      this.questionFormVisible = true;
    },
    publishQuestion() {
      this.questions.unshift({
        avatar: './img/丽.gif',
        username: 'admin',
        title: this.questionForm.title,
        detail: this.questionForm.detail,
        time: new Date().toLocaleString(),
        replies: [],
        replyFormVisible: false,
        replyContent: ''
      });
      // 清空表单
      this.questionForm.title = '';
      this.questionForm.detail = '';
      this.questionFormVisible = false;
    },
    showReplyForm(index) {
      this.questions[index].replyFormVisible = true;
    },
    publishReply(index) {
      this.questions[index].replies.push({
        avatar: './img/sasuke.gif',
        username: '回复者',
        time: new Date().toLocaleString(),
        content: this.questions[index].replyContent,
        replies: [],
        replyFormVisible: false,
        replyContent: ''
      });
      this.questions[index].replyContent = '';
      this.questions[index].replyFormVisible = false;
    }
  }
};
</script>

<style>
.question-page {
  padding: 20px;
  max-width: 1200px;
  display: block;
  margin: 0 auto;
}
.ask-button {
  margin-bottom: 20px;
}
.question-form {
  margin-bottom: 20px;
}
.question {
  margin-bottom: 20px;
}
.question-header {
  margin-bottom: 5px;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.question-author {
  font-weight: bold;
}
.question-title b {
  font-weight: bold;
}
.question-content {
  flex-grow: 1;
  margin-left: 10px;
}
.question-footer {
  margin-top: 5px;
}
.question-time {
  display: inline-block;
}
.reply-button {
  margin-left: 10px;
}
.reply-form {
  margin-top: 10px;
}
.reply {
  margin-top: 10px;
}
.reply-header {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.reply-content {
  margin-left: 40px;
}
.reply-footer {
  display: flex;
  justify-content: space-between;
  margin-left: 40px;
}
.reply-time {
  display: inline-block;
}
.sub-reply-header {
  display: flex;
  align-items: center;
  margin-left: 60px;
}
.sub-reply-content {
  margin-left: 60px;
}
.sub-reply-time {
  display: inline-block;
}
</style>
